<template>
	<view class="col" style="position: relative;	background-repeat: no-repeat;
	height: 100vh;
		background-size: 100% 100%;"  :style="{backgroundImage:`url(${detail.coverPicList[0]})`}" >
		<view class="row-between-center" style="margin: 40rpx;">
			<view class="nav row-center">
				<image src="/static/images/detail-back.png" class="nav-back"></image>
			</view>
			<view class="nav row-center">
				<image src="/static/images/detail-share.png" class="nav-back"></image>
			</view>
		</view>
		
		<view class="info col">
			<view class="row-between-center">
				<view class="title">
					{{detail.title}}
				</view>
				<image :src="detail.isFlow?'/static/images/fa-star.svg':'/static/images/fa-star-no.svg' " class="collect" @click="addCollect"></image>
			</view>
			<view class="row-wrap" style="margin-top: 10rpx;">
				<view class="tag">热血</view>
				<view class="tag">运单</view>
				<view class="tag">热血</view>
				<view class="tag">运单</view>
				<view class="tag">热血</view>
				<view class="tag">运单</view>
			</view>
			
			<view class="desc">
				{{detail.description}}
			</view>
			<view class="line"></view>
			<view class="author">
				作者团队
			</view>
			<view class="row" style="margin-top: 5rpx;">
				<view class="avater" v-for="item in detail.tagList">
					
				</view>
			</view>
		
			<view class="read row-center" @click="goRead()">阅 读</view>
			<view class="count">
				{{detail.viewNum}}人气 | {{detail.commentNum}}评论 | {{detail.collectionNum}}收藏
			</view>
		</view>
		
		
		<u-popup :show="showList" :round="15">
			<view class="section col">
				<view class="row-between-center">
					<view class="section-title">
						选集
					</view>
					<image class="section-sort" :src="sortUp?'/static/images/sort_up.png':'/static/images/sort_down.png'" @click="sortSection()">
						
					</image>
				</view>
				<view style="flex: 1;overflow: scroll;">
					<view class="item row-h-center" v-for="item,index in sectionsList" :key="index" @click="goItem(item)">
						<view class="item-img">
							
						</view>
						<view class="item-other">
							<view class="col">
								<view class="item-title">
									#{{index}} {{item.itemTitle}}
								</view>
								<view class="row-between-center">
									<view class="item-num">
										0000-00-00
									</view>
									<image src="/static/images/like1.png" class="item-like" @click.stop="like(item)"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			
				<view class="section-bottom row-center">
					<view class="secion-close row-center">
						<image src="/static/images/close_white.png" style="width: 60rpx;height: 60rpx;" @click="showList=false"></image>
					</view>
					<view class="section-goon row-center" @click="showList=false">
						继续阅读
					</view>
				</view>
			</view>
	
		</u-popup>
		
	</view>
</template>

<script>
	import pageSectionVue from './pageSection.vue'
import {
		getItemContent,getGoodsList,addCollect,getItemWork,addFlow,itemLike
	} from '@/api/change/index.js'
	import {getPageDetail} from '@/api/change/index.js'
	export default {
		data() {
			return {
				showList:false,
				id:'',
				cover:'',
				showType:false,
				rateValue: 3,
				showCategory: false,
				showGoods: false,
				typeList:[
					{
						name:1
					},
					{
						name:1
					},
					{
						name:1
					},
					{
						name:1
					},
					{
						name:1
					},
					{
						name:1
					},
					{
						name:1
					},{
						name:1
					},{
						name:1
					}
				],
				detail:{},
				sectionsList:[],
				itemId:'',
				sortUp:false
			}
		},
		
		onLoad(option) {
			this.id = option.id
			this.itemId = option.itemId
			this.getData()
		},
		
		methods: {
			goItem(item){
				
				uni.navigateTo({
					url:'/pages/home/pageSection?id='+item.id+'&title='+item.itemTitle+'&collected='+this.detail.isFlow
				})
			},
			zan(index){
				
			},
			sortSection(){
				this.sortUp = !this.sortUp
			},
			goRead(){
				this.showList = true
				this.getItems()
			},
			goback(){
				uni.navigateBack()
			},
			getItems(){
				
				getItemWork(this.id).then(res=>{
					this.sectionsList = res.rows
				})
			},
			getData(){
				getPageDetail(this.id).then(res=>{
					this.detail = res.data
					this.cover =  res.data.coverPicList[0]
				})
			},
			
			addCollect() {
				addFlow({workId:this.id}).then(res => {
					this.getData()
				})
				
			},
			like(item) {
				itemLike(item.id).then(res => {
				})
			},
			
			showGoodsItem(){
				this.showGoods = true
			},
			close(){
				this.showGoods = false
				this.showCategory = false
			},
			onChange(e) {

			},
			 disabledScroll(){
			        return
			    },

			clickCategory() {
				this.showCategory = !this.showCategory
			}
		}
	}
</script>

<style>
	page{
		/* background-color: #fff2d4; */
		background-repeat: no-repeat;
		background-size: cover;
		
	}
</style>
<style scoped lang="scss">
	
	.section{
		height: 80vh;
		padding: 15rpx;
		.section-title{
			color: #000;
			font-size: 36rpx;
			font-weight: bolder;
		}
		.section-sort{
			width: 48rpx;
			height: 48rpx;
		}
		
		.item{
			
			padding: 15rpx 0;
			.item-other{
				margin-left: 10rpx;
				width: calc(100% - 170rpx);
			}
			.item-img{
				background-color: red;
				border-radius: 15rpx;
				width: 180rpx;
				height: 120rpx;
				flex-shrink: 0;
			}
			.item-title{
				font-weight: bolder;
				color: #000;
				font-size: 32rpx;
			}
			.item-num{
				margin-top: 20rpx;
				color: #000;
				font-size: 26rpx;
			}
			.item-like{
				width: 50rpx;
				height: 50rpx;
			}
		}
		.section-bottom{
			border-top: 1rpx solid #BEBEBE;
			.secion-close{
				margin-top: 15rpx;
				background-color: #BEBEBE;
				width: 80rpx;
				height: 80rpx;
				border-radius: 15rpx;
			}
			.section-goon{
					margin-top: 15rpx;
				margin-left: 10rpx;
				height: 80rpx;
				flex:1;
				background-color: #BD3124;
				border-radius: 15rpx;
				color: white;
				font-size: 38rpx;
			}
		}
	}
	
	
	
	.nav{
		width: 100rpx;
		height: 100rpx;
		// background-size: 100rpx 100rpx;
		// background-image:url('/static/images/nav-bg.png');
		
		line-height: 20px;
		background-color: rgba(79, 79, 79, 0.6);
		color: rgba(16, 16, 16, 1);
		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
		border-radius: 50%;
	}
	.nav-back{
		width: 60rpx;
		height: 60rpx;
	}
	.info{
		width: calc(100% - 120rpx);
		margin-left: 60rpx;
		margin-right: 60rpx;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 30rpx;
		padding: 40rpx 70rpx;
		position: fixed;
		bottom: 88rpx;
	}
	.title{
		font-size: 42rpx;
		font-weight: bold;
		color: white;
	}
	.collect{
		width: 60rpx;
		height: 60rpx;
	}
	.tag{
		margin-top: 10rpx;
		border-radius: 8rpx;
		background-color:#BD3124 ;
		padding: 8rpx 15rpx;
		color: white;
		font-size: 30rpx;
		margin-right: 30rpx;
	}
	.desc{
		margin-top: 30rpx;
		color: white;
		font-size: 30rpx;
		font-weight: bold;
	}
	.line{
		margin-top: 40rpx;
		background-color: #BEBEBE ;
		height: 5rpx;
		width: 300rpx;
	}
	.author{
		font-weight: bold;
		margin-top: 30rpx;
		font-size: 32rpx;
		color: white;
	}
	.avater{
		margin-right: 40rpx;
		background-color: red;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		border: 4px solid rgba(255, 255, 255, 1);
	}
	.read{
		margin: 50rpx 0;
		height: 100rpx;
		border-radius: 10rpx;
		background-color: #bd3124;
		color: rgba(255, 255, 255, 1);
		font-size: 40rpx;
		text-align: center;
	}
	.count{
		color: rgba(248, 248, 248, 1);
		font-size: 32rpx;
		text-align: center;
		font-weight: bold;
		font-family: PMZDBiaoTi-regular;
	}
</style>